// topLogin.tsx
import React, { useEffect } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form, Input } from 'antd';
import SignInButton from './signInButton';
import { useStore } from '../../../stores';
import { observer } from 'mobx-react-lite';

const TopSignIn: React.FC = observer(() => {
    const store = useStore();
    const [form] = Form.useForm();

    useEffect(() => {
        store.ui.setClientReady(true);
    }, []);

    const onFinish = (values: any) => {
        console.log('Finish:', values);
    };

    return (
        <Form form={form} name="horizontal_SignIn" layout={store.ui.isVerticalStyle ? "vertical" : "inline"} onFinish={onFinish}>
            <Form.Item shouldUpdate>
                {() => (
                    <div style={{ display: store.ui.isVerticalStyle ? 'block' : 'flex', alignItems: store.ui.isVerticalStyle ? 'normal' : 'center' }}>
                        <div style={{ display: store.ui.isVerticalStyle ? 'block' : 'flex' }}>
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '输入用户名!' }]}
                            >
                                <Input prefix={<UserOutlined />} placeholder="Username" size='small' allowClear={true} style={{ width: 120 }} />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '输入密码!' }]}
                            >
                                <Input prefix={<LockOutlined />} type="password" placeholder="Password" size='small' allowClear={true} style={{ width: 120 }} />
                            </Form.Item>
                        </div>


                        <SignInButton form={form} clientReady={store.ui.clientReady} />
                    </div>
                )}
            </Form.Item>
        </Form>
    );
});

export default TopSignIn;